<template>
  <div class>
    <div>
      <div class="bg_img">
        <!-- <img src="../../assets/img/jin208.jpg" alt/> -->
        <Carousel
          v-model="value1"
          loop
          class="my-swipe"
          :autoplay="setting.autoplay"
          :autoplay-speed="setting.autoplaySpeed"
          :dots="setting.dots"
          :radius-dot="setting.radiusDot"
          :trigger="setting.trigger"
          :arrow="setting.arrow"
        >
          <CarouselItem v-for="(item,index) in dataImg" :key="index">
            <img :src="item.bannerUrl" alt class="my-swipe-img" />
          </CarouselItem>
        </Carousel>
      </div>
      <titlemeta></titlemeta>
      <div class="text-center tab">
        <div class="d-inline-block tab-item" :class="{'active':tabIndex == 1}" @click="toggle(1)">
          <!-- <div class="contactUs" @click="toggle(1)" :class="{active:index == 1}"> -->
          <span>关于我们</span>
          <!-- </div> -->
        </div>
        <div class="d-inline-block tab-item" :class="{'active':tabIndex == 2}" @click="toggle(2)">
          <!-- <div class="contactUs" @click="toggle(2)" :class="{active:index == 2}"> -->
          <span>联系方式</span>
          <!-- </div> -->
        </div>
      </div>
      <div class="contactXx">以质量求信誉，以信誉求发展</div>
      <!-- <div class="contactF"></div> -->
      <div class="contactP" v-show="tabIndex === 1">
        <!-- <VueEditor
          style="width: 100%"
          v-model="dataInfo.aboutUs"
          :editorToolbar="customToolbar"
          :disabled="true"
        ></VueEditor> -->
        <div v-html="dataInfo.companyIntroduce">

        </div>
      </div>

      <div class="contacInfo" v-show="tabIndex === 2">
        <div class="contacInfo_mail">
          <Icon type="md-mail" />
          <p>E-mail：{{dataInfo.companyEmail}}</p>
        </div>
        <div class="contacInfo_pin">
          <Icon type="ios-pin" />
          <p>Add：{{dataInfo.address}}</p>
        </div>
        <div class="contacInfo_phone">
          <Icon type="ios-call" />
          <p>Tel：{{dataInfo.compangTelephone}}</p>
        </div>
      </div>
      <div class="contact_map" v-show="tabIndex === 2">
        <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler"></baidu-map>
        <!-- <baidu-map class="map" center="北京"></baidu-map> -->
      </div>
    </div>
    <!--     <lefINvitation class="leftNvit" ref="lefINvitation" @buttop="buttop"></lefINvitation>-->
    <!--    <nightNvitation class="nightNvit" v-if="!mobilePc"></nightNvitation>-->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Head from "../../components/Head";
import Foot from "../../components/Foot";
import lefINvitation from "../../components/lefINvitation";
import nightNvitation from "../../components/nightNvitation";
import { mapGetters } from "vuex";
import { bannerList, companyInfo } from "../../api/info";
import titlemeta from "../../components/titlemeta";
import { clieentWidth } from "../../utils/clientwidth";
import { VueEditor } from "vue2-editor";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Head,
    Foot,
    lefINvitation,
    nightNvitation,
    titlemeta,
    VueEditor
  },
  data() {
    //这里存放数据
    return {
      tabIndex: 1,
      value1: 0,
      setting: {
        autoplay: true,
        autoplaySpeed: 2000,
        dots: "inside",
        radiusDot: false,
        trigger: "click",
        arrow: "hover"
      },
      // 轮播数据
      dataImg: [],
      mobilePc: false,
      center: { lng: 0, lat: 0 },
      zoom: 3,
      longitude: 116.404,
      latitude: 39.915,
      customToolbar: [
        [{ font: [] }],
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        [{ size: ["small", false, "large", "huge"] }],
        ["bold", "italic", "underline", "strike"],
        [
          { align: "" },
          { align: "center" },
          { align: "right" },
          { align: "justify" }
        ],
        [{ header: 1 }, { header: 2 }],
        ["blockquote", "code-block"],
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ color: [] }, { background: [] }],
        ["link", "image", "video", "formula"],
        [{ direction: "rtl" }],
        ["clean"]
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters(["dataInfo"])
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toggle(index) {
      //   if(id === this.index){
      //   this.index = 0;
      // }else{
      this.tabIndex = index;
      // }
    },
    // banner get
    getbannerList(appType) {
      bannerList(appType).then(res => {
        this.dataImg = res.data;
      });
    },
    handler({ BMap, map }) {
      return new Promise((resolve, reject) => {
        companyInfo().then(res => {
          this.longitude = res.data.longitude;
          this.latitude = res.data.latitude;
          resolve();
        });
      }).then(() => {
        this.center.lng = this.longitude;
        this.center.lat = this.latitude;
        this.zoom = 15;
      });
    },
    // 回到顶部
    buttop(val) {
      if (val) {
        document.documentElement.scrollTop = 0;
      }
    },
    ismobilePc() {
      if (clieentWidth()) {
        this.mobilePc = true;
      } else {
        this.mobilePc = false;
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.ismobilePc();
    this.getbannerList(15);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
@import url("../../assets/nvit.scss");
.text-center {
  text-align: center;
}
.d-inline-block {
  display: inline-block;
}
.tab {
  .tab-item {
    padding: 10px 0;
    font-size: 18px;
    margin: 20px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    &.active {
      border-color: #7aaff0;
    }
  }
}
.my-swipe {
  height: 4.23rem;
  color: #fff;
  font-size: 0.3rem;
  text-align: center;
}
.my-swipe-img {
  width: 100%;
  height: 4.6rem;
}
//@import url(); 引入公共css类
$w: 6.25;
.bg_img {
  width: 100%;
}

.bg_img > img {
  width: 100%;
  height: 4.6rem;
}

.contactUs {
  padding: 0.4rem 0;
  text-align: center;
  font-size: 0.3rem;
}

.contactXx {
  text-align: center;
  font-size: 0.16rem;
  margin: 0.2rem auto;
}

.contactF {
  width: 0.5rem;
  height: 0.02rem;
  background-color: #7aaff0;
  margin: 0.1rem auto;
}

.contactP {
  width: 8rem;
  text-align: center;
  font-size: 0.14rem;
  margin: 0.5rem auto 1rem;
}

.contacInfo {
  width: 50%;
  margin: 0.2rem auto;
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-size: 0.14rem;
}

.contact_map {
  width: 7rem;
  height: 4rem;
  margin: 0.5rem auto;
}

.bm-view {
  width: 100%;
  height: 4rem;
}
/deep/.quillWrapper .ql-snow.ql-toolbar {
  display: none;
}
/deep/.ql-container.ql-snow {
  border: 0;
  /* border-top:1px solid #ccc; */
}
@media screen and (max-width: 780px) {
  .my-swipe-img,
  .section,
  .my-swipe {
    height: 1.5rem;
  }
  .bg_img {
    overflow: hidden;
  }
  .bg_img > img {
    width: 200%;
    height: 1.5rem;
    overflow: hidden;
    margin-left: -50%;
  }
  .contactUs {
    padding: 2rem / $w 0;
    font-size: 2rem / $w;
  }
  .contactXx {
    font-size: 1rem / $w;
    margin: 1.2rem / $w auto;
  }
  .contactF {
    width: 5rem / $w;
    height: 0.2rem / $w;
    background-color: #7aaff0;
    margin: 1rem / $w auto;
  }
  .contactP {
    font-size: 0.9rem / $w;
    margin: 3rem / $w auto 5rem / $w;
    width: 100%;
  }
  .contacInfo {
    width: 80%;
    display: block;
  }
  .contacInfo_mail,
  .contacInfo_pin,
  .contacInfo_phone {
    font-size: 0.9rem / $w;
    margin: 1rem / $w 0;
  }
  .contact_map {
    width: 80%;
    height: 12rem / $w;
  }
  .bm-view {
    width: 100%;
    height: 12rem / $w;
  }
}
</style>